<style>
    div.form,
    div.index,
    div.view {
        float:right;
        width:76%;
        border: none;
        padding:8px 2%;

    }
</style>

<?php echo $this->Html->script('jquery.bpopup.min'); ?>
<?php
//super admin and admin view
if ($this->Session->read('Auth.User.role_id') == 1 || $this->Session->read('Auth.User.role_id') == 2) {
    ?>

    <?php
}
// staff view

else {
    ?>
    <div class='calendar'>
        <?php
        echo $this->HTML->script('calendarScriptStaff');
        ?>
    </div>
    <div id='rosterDesc' style="font-weight:bold ;color: red; padding-left: 190px; font-size:13px;">
        <?php
        echo 'Click on the day you want to add availability. Be careful, you are not able to change it.';
        ?>
    </div>
    <div class="rosters form">
        <div id='StaffCalendar'></div>

        <div id='staffCalendarForm' style="display:none;">
            <form id="staffForm">
                <table class="popUpTable" style="width: 60px;">
                    <input type="hidden" id="hiddendate"/>
                    <input type="text" id="prefDate" disabled style="text-align: center;"/>
                    <?php foreach ($time as $no => $setTime): ?>
                        <tr style="vertical-align:middle" align="center" ><td>
                                <label style="vertical-align:middle" align="center"><?php echo $this->Time->format('H:i', $setTime['Time']['time_from']) ?> - <?php echo $this->Time->format('H:i', $setTime['Time']['time_to']) ?> </label></td>
                            <td style="vertical-align:middle; align =center; padding-left=50px"><input type="checkbox" name=" " value="<?php echo $setTime['Time']['id'] ?>" id="<?php echo $no ?>"></td>
                        </tr>
                        <?php
                        $noArray[] = array('no' => $no);
                    endforeach;
                    ?>
                    <tr>
                        <td style='text-align:center;'><input style = "width:80px; text-align: center;" type="button" id="cancel" value="Cancel" onclick="staffCancel();"/></td>
                        <td style='text-align:center;'><input style = "width:80px; text-align: center;"type="button" id="submit" value="Submit" onclick="staffSubmit();"/></td>
                    </tr>
                </table></form>

        </div>
    </div>


    <script type ="text/javascript">
                        //Cancel on Staff calendar form
                        function staffCancel() {
                            // var popup = document.getElementById("staffCalendarForm");
                            // popup.style.display = 'none';

                            // close the POP UP
                            $("#staffCalendarForm").bPopup().close();
                        }

                        //Save on staff calendar form
                        function staffSubmit() {
                            //Get no of Array
                            var noArray =<?php echo json_encode($noArray); ?>;
                            //var popup = document.getElementById("staffCalendarForm");
                            //popup.style.display = 'none';
                            $.each(noArray, function(i, noArrays) {
                                if (document.getElementById(i).checked == true) {
                                    //Collecting data
                                    var date = document.getElementById("hiddendate").value;
                                    var time = document.getElementById(i).value;

                                    //Check value
                                    console.dir(date);
                                    console.dir(time);

                                    //Pass the varible to the controller

                                    var urlData = "rosters/saveShift?date=" + date + "&time=" + time;
                     //alert(pass);


                                    $.post(urlData, function() {
                                        console.dir("Data Saved Successfully!");
                                    });

                                    // close the POP UP after submission
                                    $("#staffCalendarForm").bPopup().close();
                                }
                            }
                            );
                            // refresh calendar after saved
                            $("#StaffCalendar").fullCalendar('refetchEvents');

                                            
                        }
                        
                       
    </script>
<?php } ?>
